<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF-8">
<title>Horizontal Timeline Demo</title>
<style>
/*Layout Fundamentals*/
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;background:#f5f7fa}
/*====Block Title=====*/
.section-title{
text-align:center;
font-size:28px;
font-weight:600;
margin:40px 0 20px;
color:#333;
}
/*Timeline Container: Can Scroll Horizontally*/
.timeline-scroll{
overflow-x:auto;
padding-bottom:20px; /*Leave some space for the scrollbar for a cleaner visual experience*/
}
.timeline-track{
display:flex;
align-items:flex-start; /*Align the top of the card*/
gap:60px; /*Distance between nodes*/
position:relative; /*Let:: Before the horizontal line is positioned based on it*/
padding:40px 20px; /*Leave blank spaces above and below*/
min-width:800px; /*Horizontal scrollbar appears on small screen*/
}
/*Horizontal baseline*/
.timeline-track::before{
content:"";
position:absolute;
top:32px; /*The position of the line can be fine tuned according to the diameter of the. timeline dot*/
left:0;
width:100%;
height:3px;
background:#e3e7ff;
z-index:0;
}
/*Each node*/
.timeline-node{
position:relative;
width:220px; /*Card width needs to be coordinated with min width*/
flex-shrink:0; /*Prohibited from being compressed*/
text-align:center;
transition:transform .3s ease;
}
.timeline-node:hover{transform:translateY(-10px)}
/*------- Dot -------*/
.timeline-dot{
width:24px;
height:24px;
border-radius:50%;
background:#4f46e5;
margin:0 auto 12px;
z-index:2; /*Cover the horizontal line*/
position:relative;
box-shadow:0 0 0 6px rgba(79,70,229,.12);
transition:box-shadow .3s ease;
}
.timeline-node:hover .timeline-dot{
box-shadow:0 0 12px rgba(79,70,229,.45);
}
/*Card*/
.timeline-card{
background:#fff;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,.08);
padding:18px 16px 20px;
z-index:1;
transition:box-shadow .3s, background-color .3s;
}
.timeline-node:hover .timeline-card{
background:#f5f8ff;
box-shadow:0 6px 20px rgba(79,70,229,.25);
}
/*---- Text ----*/
.timeline-year{
font-weight:700;
font-size:18px;
color:#4f46e5;
margin-bottom:6px;
}
.timeline-title{font-size:16px;margin:0 0 6px;color:#333;font-weight:600}
.timeline-desc{font-size:14px;margin:0;color:#666;line-height:1.5}
</style>
</head>
<body>

<section>
  <h2 class="section-title">development history</h2>
  <div class="timeline-scroll">
    <div class="timeline-track">

      <div class="timeline-node">
        <div class="timeline-dot"></div>
        <div class="timeline-card">
          <div class="timeline-year">2025</div>
          <h3 class="timeline-title">Platform upgrade</h3>
          <p class="timeline-desc">Comprehensively upgrade the technical architecture, launch AI intelligent learning assistant, significantly improve user experience</p>
        </div>
      </div>

      <div class="timeline-node">
        <div class="timeline-dot"></div>
        <div class="timeline-card">
          <div class="timeline-year">2023</div>
          <h3 class="timeline-title">Alliance expansion</h3>
          <p class="timeline-desc">The number of alliance colleges has exceeded 50, with over 1000 courses and 300000 registered users</p>
        </div>
      </div>

      <div class="timeline-node">
        <div class="timeline-dot"></div>
        <div class="timeline-card">
          <div class="timeline-year">2022</div>
          <h3 class="timeline-title">develop rapidly</h3>
          <p class="timeline-desc">Obtained Series B financing, established partnerships with multiple well-known universities, and launched mobile applications</p>
        </div>
      </div>

      <div class="timeline-node">
        <div class="timeline-dot"></div>
        <div class="timeline-card">
          <div class="timeline-year">2021</div>
          <h3 class="timeline-title">Platform Establishment</h3>
          <p class="timeline-desc">AceHub has been officially established, launching the first version of its online education platform</p>
        </div>
      </div>

    </div><!-- /.timeline-track -->
  </div><!-- /.timeline-scroll -->
</section>

</body>
</html>
